<template>
  <div class="app-content">
    <div class="app-content--heard">
      <img src="../assets/prev.png" alt="" @click="huitui">
      <span class="shopping--cart">购物车</span>
      <span class="edit" @click="edit">{{this.edits}}</span>
    </div>
    <div class="block" v-show="img">
      <img src="../assets/bgdog.jpg" alt="">
    </div>
    <div class="Self-support" v-show="text">
      <input type="checkbox" id="kuaijie" class="Self-support__yes">
      <label for="kuaijie" class="Self-support--yuan"></label>
      <span class="Quick">快捷商城自营</span>
    </div>
    <div class="app-content__body" v-for="(item, key) in arr" :key="key">
      <input type="checkbox" :id="item._id" class="app-content__body__yes" v-model="cartids" :value="item">
      <label :for="item._id" class="app-content__body--yuan" @click="Id(key)"></label>
      <img class="app-content__body__img" :src="item.prod.prodImage[0]" alt="">
      <span class="introduce">{{item.prod.prodSupTitle}}</span><br>
      <span class="money">¥{{item.prod.currentPrice}}</span>
      <div class="app-content__body--num">
        <span class="subtraction" @click="subtrAction(key)">
            <img src="../assets/subtraction.png" alt="">
          </span>
        <span class="num">{{item.num}}</span>
        <span class="Addition" @click="add(key)">
            <img src="../assets/add.png" alt="">
          </span>
      </div>
      </div>
    <div class="app-content--footer">
      <div class="block"></div>
      <div class="settle">
        <div class="checkell">
          <input type="checkbox" id="heji" class="checkell__yes">
          <label for="heji" class="checkell--yuan"><span class="checkell--quanxuan">全选</span></label>
        </div>
        <div class="aggregate">
          <div class="aggregate__show" v-show="show">
            <span class="aggregate--text">合计:<span class="aggregate--money">{{totalPrice}}</span></span>
          </div>
          <span class="aggregate__settle" v-show="settle" @click="Confirmation">结算({{cartids.length}})</span>
          <span class="aggregate__settle--two" v-show="settleTwo" @click="del(key)">删除({{cartids.length}})</span>
        </div>
      </div>
    </div>
      <!--<span @click="del(key)">删除</span>-->
    </div>
</template>

<script>
export default {
  name: "commodity",
  data() {
    return {
      img: true,
      text: false,
      edits: '编辑',
      arr: [],
      res: [],
      id: [],
      xid: [],
      cartids: [],
      money: '',
      index: 0,
      xxx: 0,
      settle: true,
      settleTwo: false,
      show: true,
      keyid: [],
      arrid: [],
    }
  },
  methods: {
    Id(key){
      this.keyid.push(this.arr[key]);
    },
    del(key){
      if (this.cartids[0]) {
        this.cartids.forEach(v => {this.id.push(v._id)})
      }
      this.$apis.shoppingDel({
        cartids: this.xid,
      })
        .then(data => {
          this.arr.splice(key, 1);
          console.log(data);
        })
        .catch(error => {
          console.log(error);
        })
    },
    edit(){
      this.xxx ++;
      if ((this.xxx) % 2 === 1) {
        this.edits = '完成';
        this.settle = false;
        this.settleTwo = true;
        this.show = false;
      } else {
        this.edits = '编辑';
        this.settle = true;
        this.settleTwo = false;
        this.show = true;
      }
    },
    huitui(){
      this.$router.go(-1);
    },
    subtrAction(key) {
      if (this.arr[key].num > 1) {
        this.arr[key].num --;
      }
        this.$apis.ToUpdate({
          cartid: this.arr[key]['_id'],
          num: this.arr[key].num,
        })
          .then(data => {
            console.log(data);
          })
          .catch(error => {
            console.log(error);
          })
    },
    add(key){
      this.arr[key].num ++;
      this.$apis.ToUpdate({
        cartid: this.arr[key]['_id'],
        num: this.arr[key].num,
        })
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.log(error);
        })
      // this.img.currentPrice = this.Price * this.num;
    },
    Confirmation(){
      this.cartids.forEach((v) => {
        this.arrid.push(v._id);
      });
      this.$router.push({name: 'Confirmation', params: {
          data: this.keyid,
          money: this.totalPrice,
          newid: this.arrid,
      }});
    }
  },
  created() {
    this.$apis.commodity()
      .then(data => {
        this.arr = data.data.data;
        this.index = this.arr.num;
        console.log(this.arr);
      })
      .catch(error => {
        console.log(error);
      });
    if (this.arr) {
      this.img = false;
      this.text = true;
    }
  },
  computed: {
    totalPrice() {
      return this.cartids.reduce(function (prev, current) {
        return prev + (+current.prod.currentPrice * +current.num)
      },0)
    }
  },
}
</script>

<style scoped>
  .app-content{
    width: 100vw;
    height: 100vh;
  }
  .app-content--heard{
    width: 100vw;
    height: 83px;
    border-bottom: 1px solid #e3e3e3;
    position: fixed;
    background: white;
    display: block;
    z-index: 9;
    top: 0;
  }
  .app-content--heard>img{
    width: .5rem;
    height: .5rem;
    position: absolute;
    left: .4rem;
    top: .3rem;
  }
  .shopping--cart{
    display: inline-block;
    position: relative;
    font-size: 31px;
    left: 45vw;
    top: .3rem;
    margin: auto;
    color: #232323;
  }
  .edit{
    display: inline-block;
    position: relative;
    color: #919191;
    font-size: 31px;
    top: .3rem;
    left: 75vw;
    margin: auto;
  }
  .block{
    width: 100vw;
    height: 400px;
  }
  .block>img {
    display: inline-block;
    width: 100vw;
    height: 400px;
  }
  .Self-support{
    position: relative;
    top: 85px;
    width: 100vw;
    display: block;
    height: 85px;
    border-bottom: 1px solid #e3e3e3;
  }
  .Self-support__yes{
    display: none;
  }
  .Self-support--yuan{
    width: 36px;
    height: 36px;
    display: inline-block;
    position: relative;
    border-radius: 50%;
    border: 1px solid #919191;
    top: 10px;
    left: 30px;
  }
  .Self-support__yes:checked + .Self-support--yuan {
    background-image: url("../assets/yes.png");
    background-size: 37px 37px;
    background-position: center;
  }
  .Quick{
    display: inline-block;
    position: relative;
    line-height: 85px;
    font-size: 27px;
    color: #232323;
    left: 50px;
  }
  .app-content__body{
    width: 100vw;
    height: 240px;
    position: relative;
    top: 85px;
  }
  .app-content__body__yes{
    display: none;
  }
  .app-content__body--yuan{
    width: 36px;
    height: 36px;
    display: inline-block;
    position: relative;
    border-radius: 50%;
    border: 1px solid #919191;
    top: -35px;
    left: 30px;
  }
  .app-content__body__yes:checked + .app-content__body--yuan {
    background-image: url("../assets/yes.png");
    background-size: 37px 37px;
    background-position: center;
  }
  .app-content__body__img{
    display: inline-block;
    height: 180px;
    width: 180px;
    border-radius: 5px;
    position: relative;
    top: 30px;
    margin-left: 50px;
  }
  .introduce{
    display: inline-block;
    font-size: 28px;
    position: relative;
    top: -100px;
    left: 40px;
  }
  .money{
    display: inline-block;
    position: relative;
    font-size: 26px;
    left: 300px;
    top: -70px;
    color: slategray;
  }
  .app-content__body--num{
    display: inline-block;
    position: relative;
    top: -55px;
    left: 400px;
  }
  .subtraction{
    display: inline-block;
    position: relative;
    width: 60px;
    height: 61px;
    border: 1px solid #bbb;
    top: -1px;
    left: 34px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  .subtraction>img{
    display: inline-block;
    position: relative;
    width: .5rem;
    height: .5rem;
    top: 15px;
    left: 15px;
  }
  .num{
    display: inline-block;
    position: relative;
    font-size: 24px;
    text-align: center;
    width: 83px;
    left: 26px;
    line-height: 60px;
    top: 2px;
    border: 1px solid #bbb;
  }
  .Addition{
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
    border: 1px solid #bbb;
    top: -8px;
    left: 16px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .Addition>img{
    display: inline-block;
    position: relative;
    width: 30px;
    top: 15px;
    left: 15px;
  }
  .app-content--footer{
    width: 100vw;
    height: 90px;
    background: white;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    margin: auto;
  }
  .block{
    width: 100vw;
    height: 10px;
    background: #e2e2e2;
  }
  .settle{
    width: 100vw;
    height: 90px;
  }
  .checkell{
    height: 90px;
    display: inline-block;
    width: 100px;
    position: fixed;
    bottom: -20px;
  }
  .checkell__yes{
    display: none;
  }
  .checkell--yuan{
    width: 36px;
    height: 36px;
    display: inline-block;
    position: relative;
    border-radius: 50%;
    border: 1px solid #919191;
    top: 10px;
    left: 30px;
  }
  .checkell__yes:checked + .checkell--yuan {
    background-image: url("../assets/yes.png");
    background-size: 37px 37px;
    background-position: center;
  }
  .checkell--quanxuan{
    display: inline-block;
    font-size: 26px;
    width: 100px;
    position: relative;
    left: 60px;
    top: 4px;
  }
  .aggregate{
    position: fixed;
    display: inline-block;
    left: 200px;
    bottom: 23px;
  }
  .aggregate__show{
    margin-top: 22px;
    width: 200px;
  }
  .aggregate--text{
    display: inline-block;
    position: fixed;
    bottom: 23px;
    width: 90px;
    font-size: 28px;
  }
  .aggregate--money{
    display: inline-block;
    position: fixed;
    width: 80px;
    bottom: 23px;
    font-size: 28px;
    left: 280px;
    color: #ee9900;
  }
  .aggregate__settle{
    display: inline-block;
    position: fixed;
    width: 210px;
    font-size: 28px;
    text-align: center;
    line-height: 80px;
    background: #0077aa;
    color: white;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .aggregate__settle--two{
    display: inline-block;
    position: fixed;
    width: 210px;
    font-size: 28px;
    text-align: center;
    line-height: 80px;
    background: red;
    color: white;
    right: 0;
    bottom: 0;
    margin: auto;
  }
</style>
